<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单元素：采集用户信息，并提交信息到服务器
		 采集用户信息元素input必须属性type决定input呈现效果
		 重点掌握type中属性值    text   文本框
		                        password 密文文本框
								submit    提交
								button    按钮【html4.0写法加value="按钮名称"】
								reset     充值 结合表单元素
								color     颜色
								datetime-local 本地日期时间插件
								date      年月日插件
								time      时分插件
								week      周插件
								range     滑块
								file      文件
								radio     单选框
								checkbox     复选框
								image     图片按钮结合src属性使用
								hidden    隐藏结合js
		 -->
		 <form>
			 <h1>控件元素</h1>
		 账号：<input type="text"><br />
		 密码：<input type="password" /><br />
		 <input type="submit" />
		 <input type="button"  value="自定义按钮"/>
		 <!-- html5.0写法-->
		 <button>点击按钮</button>
		 <input type="reset" />
		 <input type="color" />
		 <input type="datetime-local" />
		 <input type="date" />
		 <input type="time" />
		 <input type="week" />
		 <input type="range" />
		 <input type="file" />
		 男<input type="radio" name="sex"/>
		 女<input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox" />麻辣烫
		<input type="checkbox" />佛跳墙
		<input type="image"  src="img/1.png" />
		<input type="hidden" />
		<h1>下拉列表元素</h1>
		<!-- 层叠元素 快捷键：select>option -->
		发车时间：<select>
				<option>00:00--24:00</option>
				<option>00:00--06:00</option>
				<option>06:00--12:00</option>
				<option>12:00-18:00</option>
				<option>18:00-24:00</option>
			</select>
			<!-- 超大文本框元素 cols列属性   rows行属性-->
			<h1>超大文本框元素</h1>
			建议：<textarea cols="50" rows="10"></textarea>
			<!-- 细节元素  层叠元素 快捷键：details>summary+div-->
			<h1>细节元素</h1>
			<details>
				<summary>征婚启示</summary>
				<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis culpa quia nihil aspernatur aperiam earum consequuntur? Provident repellat delectus ab ea? Earum iusto minus quasi sed officiis animi eius voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae nesciunt obcaecati repudiandae, porro quia molestiae veritatis laudantium dolorem quod earum aperiam mollitia. Et eos error adipisci placeat, amet facere ea. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum tempora totam dolores id ex eveniet deserunt ipsa, explicabo animi asperiores rem unde possimus fugiat nisi quos sint modi porro!</div>
			</details>
		 </form>
		 <h1>新元素</h1>
		 <!-- 记号笔元素-->
		 周五<mark>放假啦<mark>
		 <!-- 度量元素 value度量单位="默认0min~1max"值 指定最大值跟最小值
		    min属性 max属性
		 -->
		 电量：<meta value="50"min="0" max="100"/></meter>
	</body>
</html>